<template>
  <div>
    <!-- 视频数据卡片 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="part-title">视频数据</span>
        </div>
      </template>
      <div class="video-data-list">
        <div
          v-for="(item, index) in dataPartList"
          :key="index"
          :class="['video-data-item', item.isSelected ? 'active' : '']"
          @click="selectDataPart(item)"
        >
          <div class="video-data-title">
            <div class="name">
              <i :class="['iconfont', item.icon]"></i>
              {{ item.name }}
            </div>
            <div class="pre-count" v-if="item.preCount > 0">
              +{{ item.preCount }}
            </div>
          </div>
          <div class="total-count">{{ item.totalCount }}</div>
        </div>
      </div>
    </el-card>

    <!-- 近7天播放趋势图 -->
    <el-card class="week-data-panel">
      <template #header>
        <div class="card-header">
          <span class="part-title">近7天播放</span>
        </div>
      </template>
      <div ref="chartRef" class="data-chart"></div>
    </el-card>

    <!-- 热门视频排行 -->
    <el-card class="hot-video-panel">
      <template #header>
        <div class="card-header">
          <span class="part-title">热门视频排行</span>
        </div>
      </template>
      <el-table
        :data="hotVideos"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="rank" label="排名" width="80" />
        <el-table-column prop="title" label="视频标题" />
        <el-table-column prop="author" label="作者" width="150" />
        <el-table-column prop="views" label="播放量" width="150" />
        <el-table-column prop="likes" label="点赞量" width="120" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, shallowRef } from 'vue'
import useUserStore from '@/store/modules/user'
import * as echarts from 'echarts'

const userStore = useUserStore()

// 首页挂载完毕，发送请求获取用户信息
onMounted(() => {
  userStore.userInfo()
  initChart()
})

// 模拟数据
const dataPartList = ref([
  {
    name: '用户数',
    icon: 'icon-user',
    totalCountKey: 'userCount',
    preDataType: 1,
    totalCount: 180,
    preCount: 12,
    isSelected: false,
  },
  {
    name: '播放',
    icon: 'icon-play-solid',
    totalCountKey: 'playCount',
    preDataType: 0,
    totalCount: 3644,
    preCount: 286,
    isSelected: true,
  },
  {
    name: '评论',
    icon: 'icon-comment-solid',
    totalCountKey: 'commentCount',
    preDataType: 5,
    totalCount: 45,
    preCount: 8,
    isSelected: false,
  },
  {
    name: '弹幕',
    icon: 'icon-danmu-solid',
    totalCountKey: 'danmuCount',
    preDataType: 6,
    totalCount: 48,
    preCount: 5,
    isSelected: false,
  },
  {
    name: '点赞',
    icon: 'icon-like-solid',
    totalCountKey: 'likeCount',
    preDataType: 2,
    totalCount: 43,
    preCount: 15,
    isSelected: false,
  },
  {
    name: '收藏',
    icon: 'icon-collection-solid',
    totalCountKey: 'collectCount',
    preDataType: 3,
    totalCount: 31,
    preCount: 3,
    isSelected: false,
  },
  {
    name: '投币',
    icon: 'icon-toubi',
    totalCountKey: 'coinCount',
    preDataType: 4,
    totalCount: 73,
    preCount: 7,
    isSelected: false,
  },
])

const currentDataPart = ref(
  dataPartList.value.find((item) => item.isSelected) || dataPartList.value[0],
)

// 选择数据类型
const selectDataPart = (item: any) => {
  dataPartList.value.forEach((i) => (i.isSelected = false))
  item.isSelected = true
  currentDataPart.value = item
  updateChart()
}

// 热门视频列表
const hotVideos = ref([
  {
    rank: 1,
    title: '【原创】如何快速入门前端开发',
    author: '前端大师',
    views: 15678,
    likes: 2341,
  },
  {
    rank: 2,
    title: '2023年最值得学习的编程语言',
    author: '编程指南',
    views: 12389,
    likes: 1872,
  },
  {
    rank: 3,
    title: 'Vue3+TypeScript完整实战教程',
    author: 'Vue爱好者',
    views: 10293,
    likes: 1643,
  },
  {
    rank: 4,
    title: '一小时带你入门React Hooks',
    author: 'React专家',
    views: 9876,
    likes: 1524,
  },
  {
    rank: 5,
    title: '从零开始学习Node.js后端开发',
    author: '全栈工程师',
    views: 8765,
    likes: 1321,
  },
])

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  if (rowIndex === 0) {
    return 'top-row'
  } else if (rowIndex === 1) {
    return 'second-row'
  } else if (rowIndex === 2) {
    return 'third-row'
  }
  return ''
}

// 图表相关
const chartRef = ref(null)
const dataChart = shallowRef()

const initChart = () => {
  if (chartRef.value) {
    dataChart.value = echarts.init(chartRef.value)
    updateChart()
  }
}

const updateChart = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: getLastWeekDates(),
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: currentDataPart.value.name,
        type: 'line',
        stack: 'Total',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(255, 70, 131, 0.8)',
              },
              {
                offset: 1,
                color: 'rgba(255, 70, 131, 0.1)',
              },
            ],
          },
        },
        emphasis: {
          focus: 'series',
        },
        data: getRandomData(),
      },
    ],
  }

  dataChart.value.setOption(option)
}

// 获取过去7天的日期
const getLastWeekDates = () => {
  const dates = []
  for (let i = 6; i >= 0; i--) {
    const date = new Date()
    date.setDate(date.getDate() - i)
    dates.push(`${date.getMonth() + 1}-${date.getDate()}`)
  }
  return dates
}

// 获取随机数据
const getRandomData = () => {
  const data = []
  for (let i = 0; i < 7; i++) {
    data.push(Math.floor(Math.random() * 100))
  }
  return data
}

// 窗口大小变化时重新调整图表大小
window.addEventListener('resize', () => {
  if (dataChart.value) {
    dataChart.value.resize()
  }
})
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.part-title {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.video-data-list {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: 10px;

  .video-data-item {
    cursor: pointer;
    background: #f5fcfe;
    padding: 20px;
    border-radius: 5px;
    transition: all 0.3s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .video-data-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .name {
        color: #606266;
        font-size: 14px;
        display: flex;
        align-items: center;

        .iconfont {
          margin-right: 8px;
          font-size: 20px;
        }
      }

      .pre-count {
        color: #ff4684;
        font-size: 12px;
        font-weight: 500;
      }
    }

    .total-count {
      margin-top: 16px;
      font-weight: bold;
      color: #409eff;
      font-size: 24px;
    }
  }

  .active {
    background: #ff4684;

    .video-data-title {
      .name {
        color: #fff;
      }

      .pre-count {
        color: #fff;
      }
    }

    .total-count {
      color: #fff;
    }
  }
}

.data-chart {
  height: 400px;
  width: 100%;
}

.week-data-panel,
.hot-video-panel {
  margin-top: 20px;
}

.hot-video-panel {
  :deep(.top-row) {
    background-color: rgba(255, 70, 131, 0.1);
  }

  :deep(.second-row) {
    background-color: rgba(64, 158, 255, 0.1);
  }

  :deep(.third-row) {
    background-color: rgba(103, 194, 58, 0.1);
  }
}
</style>
